वळख
jsDelivr आनी साचा स्टार्टर पानासयत प्रतिसाद दिवपी, मोबायल-पयली साइट तयार करपाक संवसारांतली सगळ्यांत लोकप्रिय चौकटी, Bootstrap कडेन सुरवात करात.
बेगीन सुरू करप
तुमच्या प्रकल्पांत Bootstrap बेगीन जोडपाक सोदता? jsDelivr, एक मुक्त मुक्त स्रोत CDN वापरात. पॅकेज वेवस्थापक वापरप वा स्त्रोत फायली डाउनलोड करपाची गरज आसा? डाउनलोड्स पानाचेर वचचें .
सीएसएस हें नांव
आमचो CSS लोड करपाक हेर सगळ्या स्टायलशीटां पयलीं तुमच्यांत स्टायलशीट कॉपी-पेस्ट करात <link>
.<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
जे एस
आमच्या जायत्या घटकांक काम करपाक जावास्क्रिप्ट वापरपाची गरज आसता. खासा करून, तांकां आमचे स्वताचे जावास्क्रिप्ट प्लगइन आनी Popper जाय . तुमच्या पानांच्या शेवटाक, बंद करपी टॅगा पयलीं, सकयल दिल्ल्या <script>
s मदलो एक दवरात </body>
, तांकां सक्षम करपाक.
बंडल
आमच्या दोन बंडलांतल्या एका बंडला वांगडा दरेक Bootstrap JavaScript प्लगइन आनी अवलंबन समाविष्ट करात. दोनूय bootstrap.bundle.js
आनी आमच्या टूलटिप्स आनी पोपोव्हरां खातीर पॉपरbootstrap.bundle.min.js
समाविष्ट करात. बूटस्ट्रॅपांत कितें आस्पावलां हाचे विशीं चड म्हायती खातीर, उपकार करून आमचो आशय विभाग पळयात.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
वेगळें
तुमी वेगळ्या स्क्रिप्ट समाधानासयत वचपाचें थारायल्यार, Popper पयली येवंक जाय (जर तुमी टूलटिप्स वा पॉपओव्हर वापरतात जाल्यार), आनी मागीर आमचे JavaScript प्लगइन.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
मॉड्यूल आसात
तुमी वापरतात जाल्यार <script type="module">
, उपकार करून आमचो वापर बूटस्ट्रॅप मॉड्यूल म्हणून विभागाचो संदर्भ घेयात.
घटकांचो आस्पाव जाता
खंयच्या घटकांक स्पश्टपणान आमची जावास्क्रिप्ट आनी पॉपर जाय अशी उमेद आसा? सकयल दिल्ल्या घटक दाखोवप दुव्याचेर क्लिक करात. सामान्य पान रचणुकेविशीं तुमकां बिल्कुल अनिश्चीत आसल्यार, एक उदाहरण पान साच्याखातीर वाचत रावचें.
जावास्क्रिप्टाची गरज आशिल्ले घटक दाखोवचे
- काडून उडोवपा खातीर सावधानताय
- टॉगल करपाच्यो स्थिती आनी चेकबॉक्स/रेडिओ कार्यक्षमताय खातीर बटण
- सगळ्या स्लाइड वर्तना खातीर, नियंत्रणां खातीर, आनी निर्देशकां खातीर हिंडोळ
- सामुग्रीची दृश्यताय टॉगल करपाखातीर संकुचीत करात
- दाखोवपाखातीर आनी स्थिती करपाखातीर ड्रॉपडावन ( Popper चीय गरज आसा )
- दाखोवप, स्थिती, आनी स्क्रोल वर्तना खातीर मोडल
- प्रतिसाद दिवपी वागणूक चालीक लावपाक आमचें संकुचीत प्लगइन विस्तारपा खातीर नवबार
- दाखोवप, स्थिती, आनी स्क्रोल वर्तन करपाखातीर ऑफकॅनव्हास
- दाखोवपा खातीर आनी काडून उडोवपा खातीर टोस्ट
- दाखोवपाखातीर आनी स्थिती करपाखातीर टूलटिप्स आनी पॉपओव्हर्स (तशेंच पॉपराची गरज आसा )
- स्क्रोल वागणूक आनी नेव्हिगेशन अद्ययावतां खातीर स्क्रोलस्पाय
स्टार्टर टेम्पलेट
तुमचीं पानां नवीनतम डिझायन आनी विकास मानकां सयत सेट केल्लीं खात्रीन करात. म्हणल्यार HTML5 डॉकटायप वापरप आनी योग्य प्रतिसाद दिवपी वर्तना खातीर व्ह्यूपोर्ट मेटा टॅग समाविष्ट करप. सगळें एकठांय दवरात आनी तुमचीं पानां अशीं दिसपाक जाय:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
फुडल्या पांवड्या खातीर, तुमच्या साइटची सामुग्री आनी घटक मांडपाक सुरवात करपाक मांडावळ डॉक्स वा आमच्या अधिकृत उदाहरणांक भेट दिवची.
म्हत्वाचे जागतीक
बूटस्ट्रॅप मुठीभर म्हत्वाचीं जागतीक शैली आनी मांडावळी वापरता जी तुमकां वापरतना जाणविकाय आसची पडटली, जीं सगळीं चड करून फकत क्रॉस ब्राउझर शैलींच्या सामान्यीकरणा कडेन तयार केल्लीं आसात. भितर बुडून घेवया.
एचटीएमएल 5 डॉकटायप
बूटस्ट्रॅपाक HTML5 डॉकटायपाचो वापर करचो पडटा. ताचेबगर तुमकां कांय फंकी अपूर्ण स्टायलिंग दिसतली, पूण तातूंत आस्पाव केल्यार कसलीच बरीच हिचकी जावंक फावना.
<!doctype html>
<html lang="en">
...
</html>
प्रतिसाद दिवपी मेटा टॅग
Bootstrap is developed mobile first , एक रणनीती जातूंत आमी पयली मोबायल डिव्हायसां खातीर कोड ऑप्टिमायझ करतात आनी मागीर CSS माध्यम क्वेरी वापरून गरजे प्रमाण घटक स्केल करतात. सगळ्या डिव्हायसां खातीर योग्य रेंडरींग आनी स्पर्श झूमिंग सुनिश्चीत करूंक, तुमच्या कडेन प्रतिसाद दिवपी दृश्यपोर्ट मेटा टॅग जोडात<head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
हाचें एक उदाहरण तुमी स्टार्टर साच्यांत कृतींत पळोवंक शकतात .
बॉक्स-साइज करप
CSS त चड सरळ आकार दिवपाखातीर, आमी जागतीक box-sizing
मोल पासून content-box
ते बदलतात border-box
. हाका लागून padding
घटकाच्या निमाण्या गणीत केल्ल्या रुंदायेचेर परिणाम जायना हाची खात्री जाता, पूण ताका लागून Google नकाशे आनी Google सानुकूल सोद इंजिन सारकिल्या कांय तिसऱ्या पक्षाच्या सॉफ्टवॅरा कडेन समस्या निर्माण जावंक शकतात.
तुमकां तें ओव्हररायड करपाची गरज आशिल्ल्या दुर्मिळ प्रसंगाचेर, सकयल दिल्ल्या प्रमाणें कितें तरी वापरात:
.selector-for-some-widget {
box-sizing: content-box;
}
वयल्या स्निपेटा वांगडा, नेस्टेड घटक- ::before
आनी वरवीं तयार केल्ली सामुग्री सयत- ::after
सगले त्या box-sizing
खातीर निर्दिश्ट केल्लें वारसा घेतले .selector-for-some-widget
.
CSS Tricks हांगा बॉक्स मॉडेल आनी आकार दिवपा विशीं चड जाणून घेयात .
रिबूट करचें
सुदारीत क्रॉस-ब्राउझर रेंडरींग खातीर, सामान्य HTML घटकांक मात्शें चड मतदार रिसेट पुरवण करतना ब्राउझर आनी डिव्हायसां मदीं विसंगती दुरुस्त करपाक आमी रिबूट वापरतात.
समुदाय
बूटस्ट्रॅपाच्या विकासा विशीं अद्ययावत रावचें आनी ह्या उपकारक साधनां वरवीं समाजा मेरेन पावचें.
- द ऑफिशियल बूटस्ट्रॅप ब्लॉग वाचात आनी सबस्क्राइब करात .
- IRC च्या सहकारी Bootstrappers कडेन गप्पा मारात. सर्वराचेर
irc.libera.chat
,#bootstrap
चॅनलांत. bootstrap-5
कार्यान्वयन मदत स्टॅक ओव्हरफ्लो (टॅग केल्ली ) हांगा मेळूं येता .- चडांत चड सोद घेवपा खातीर npm
bootstrap
वा तत्सम वितरण यंत्रणे वरवीं वितरीत करतना Bootstrap कार्यक्षमताय बदलपी वा जोडपी पॅकेजींचेर विकसकांनी कीवर्ड वापरपाक जाय .
तशेंच ताज्या गॉसिप आनी अद्भुत संगीत व्हिडियो खातीर तुमी ट्विटराचेर @getbootstrap हांकां फॉलो करूंक शकतात .